
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="author" content="译者：王赛 <wangsai@bootcss.com>">

    <title>

        起步 &middot; Bootstrap v3 中文文档

    </title>
    <!-- Bootstrap core CSS -->
    <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="icon" href="/favicon.ico">

    <script>
        var _hmt = _hmt || [];
    </script>
    <style>
        .bs-docs-nav .navbar-nav>li>a {
            font-weight: 500;
            color: #000000;
        }
    </style>
</head>
<body >
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>

<!-- Docs master nav -->
<header class="navbar nav-tabs  navbar-static-top  bs-docs-nav" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="../getting-started/" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-起步'])">起步</a>
                </li>
                <li>
                    <a href="../css/" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-全局CSS样式'])">全局 CSS 样式</a>
                </li>
                <li>
                    <a href="../components/" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-组件'])">组件</a>
                </li>
                <li>
                    <a href="../javascript/" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-JavaScript插件'])">JavaScript 插件</a>
                </li>
                <li>
                    <a href="../customize/" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-定制'])">定制</a>
                </li>
                <li><a href="http://www.youzhan.org" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-网站实例'])" target="_blank">网站实例</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- <li><a href="http://mb.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'themes'])" target="_blank">主题/模板</a></li> -->
                <li><a href="http://www.bootcss.com/" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-Bootstrap中文网'])" target="_blank">Bootstrap中文网</a></li>
            </ul>
        </nav>
    </div>
</header>


<!-- Docs page layout -->
<div class="bs-docs-header" id="content" tabindex="-1" style="background-color: #6f5499">
    <div class="container">
        <h1>起步</h1>
        <p>简要介绍 Bootstrap，以及如何下载、使用，还有基本模版和案例，等等。</p>
    </div>
</div>

<div class="container bs-docs-container" id="navbar-example">

    <div class="row">
        <div class="col-md-9" role="main">
            <div class="bs-docs-section">
                <h1 id="download" class="page-header">下载</h1>

                <p class="lead">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。</p>

                <div class="row bs-downloads">
                    <div class="col-sm-4">
                        <h3 id="download-bootstrap">用于生产环境的 Bootstrap</h3>
                        <p>编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。</p>
                        <p>
                            <a href="https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip" class="btn btn-lg btn-outline">下载 Bootstrap</a>
                        </p>
                    </div>
                    <div class="col-sm-4">
                        <h3 id="download-source">Bootstrap 源码</h3>
                        <p>Less、JavaScript 和 字体文件的源码，并且带有文档。<strong>需要 Less 编译器和<a href="#grunt">一些设置工作</a></strong>。</p>
                        <p>
                            <a href="https://github.com/twbs/bootstrap/archive/v3.3.7.zip" class="btn btn-lg btn-outline">下载源码</a>
                        </p>
                    </div>
                    <div class="col-sm-4">
                        <h3 id="download-sass">Sass</h3>
                        <p><a href="https://github.com/twbs/bootstrap-sass">这是 Bootstrap 从 Less 到 Sass 的源码移植项目</a>，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。</p>
                        <p>
                            <a href="https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz" class="btn btn-lg btn-outline">下载 Sass 项目</a>
                        </p>
                    </div>
                </div>

                <h2 id="download-cdn">使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）</h2>
                <p><a href="http://www.bootcss.com/" target="_blank">Bootstrap 中文网</a> 联合 <a href="https://www.upyun.com/" target="_blank">又拍云</a> 共同为 Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootCDN 还对大量的前端开源工具库提供了 CDN 加速服务，请进入<a href="http://www.bootcdn.cn/"
                >BootCDN 主页</a>查看更多可用的工具库。</p>
                <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- 最新版本的 Bootstrap 核心 CSS 文件 --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- 可选的 Bootstrap 主题文件（一般不用引入） --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- 最新的 Bootstrap 核心 JavaScript 文件 --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>

                <h2 id="download-bower">通过 Bower 进行安装</h2>
                <p>还可以通过 <a href="http://bower.io">Bower</a> 安装并管理 Bootstrap 的 Less、CSS、JavaScript 和字体文件。</p>
                <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">$ </span>bower install bootstrap</code></pre></figure>

                <h2 id="download-npm">通过 npm 进行安装</h2>
                <p>你还可以利用 <a href="https://www.npmjs.com">npm</a> 工具来安装 Bootstrap：</p>
                <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">$ </span>npm install bootstrap@3</code></pre></figure>
                <p><code>require('bootstrap')</code> 代码的作用是加载 Bootstrap 的所有 jQuery 插件。其中，<code>bootstrap</code> 模块自身并不导出任何内容。你可以通过加载安装包顶级目录下的 <code>/js/*.js</code> 文件的方式手动加载单个的 Bootstrap 插件。</p>
                <p>Bootstrap 的 <code>package.json</code> 文件包含了一些额外的元数据：</p>
                <ul>
                    <li><code>less</code> - Bootstrap 源码的入口 <a href="http://lesscss.org">Less</a> 文件的路径</li>
                    <li><code>style</code> - Bootstrap 的未压缩 CSS 文件的路径</li>
                </ul>

                <h2 id="download-composer">通过 Composer 进行安装</h2>
                <p>通过 <a href="https://getcomposer.org">Composer</a> （中文官网：<a href="http://www.phpcomposer.com">Composer 中文网</a>）也可以安装 Bootstrap 安装包，其中包括 Less、CSS、JavaScript 和 fonts 文件：</p>
                <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">$ </span>composer require twbs/bootstrap</code></pre></figure>

                <h2 id="download-autoprefixer">编译 Less/Sass 源码需要注意的事项</h2>
                <p>Bootstrap 利用 <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> 自动为 <a href="http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm">某些 CSS 属性添加针对特定厂商的前缀</a>。如果你是从 Less/Sass 源码编译 Bootstrap 的，并且没有使用 Bootstrap 自带的 Gruntfile 文件，那你就必须将 Autoprefixer 集成到你的编译工具和编译过程中。如果你使用的是我们预先编译好的 Bootstrap 文件或者使用的是我们提供的 Gruntfile 文件，那就无需操心了，我们已经将这些工作替你搞定了。</p>
            </div>
        </div>
        <div class="col-md-3" role="complementary">
            <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
                <ul class="nav bs-docs-sidenav">

                    <li>
                        <a href="#download">下载</a>
                    </li>
                    <li>
                        <a href="#whats-included">包含的内容</a>
                        <ul class="nav">
                            <li><a href="#whats-included-precompiled">预编译版</a></li>
                            <li><a href="#whats-included-source">Bootstrap 源码</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#grunt">编译 CSS 和 JavaScript 文件</a>
                        <ul class="nav">
                            <li><a href="#grunt-installing">安装 Grunt</a></li>
                            <li><a href="#grunt-commands">可以使用的 Grunt 命令</a></li>
                            <li><a href="#grunt-troubleshooting">除错</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#template">基本模板</a>
                    </li>
                    <li>
                        <a href="#examples">实例精选</a>
                        <ul class="nav">
                            <li><a href="#examples-framework">Bootstrap 框架的基本用法</a></li>
                            <li><a href="#examples-navbars">导航条实例</a></li>
                            <li><a href="#examples-custom">自定义组件</a></li>
                            <li><a href="#examples-experiments">Experiments</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#tools">工具</a>
                        <ul class="nav">
                            <li><a href="#tools-bootlint">Bootlint</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#community">社区</a>
                    </li>
                    <li>
                        <a href="#disable-responsive">禁止响应式布局</a>
                    </li>
                    <li>
                        <a href="#migration">从 2.x 版本升级到 3.0 版本</a>
                    </li>
                    <li>
                        <a href="#support">对浏览器和设备的支持情况</a>
                        <ul class="nav">
                            <li><a href="#support-browsers">被支持的浏览器</a></li>
                            <li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
                            <li><a href="#support-ie8-respondjs">IE8 与 Respond.js</a></li>
                            <li><a href="#support-ie8-box-sizing">IE8 与 box-sizing 属性</a></li>
                            <li><a href="#support-ie8-font-face">IE8 and @font-face</a></li>
                            <li><a href="#support-ie-compatibility-modes">IE 兼容模式</a></li>
                            <li><a href="#support-chinese-browsers-renderer-modes">国产浏览器高速模式</a></li>
                            <li><a href="#support-ie10-width">IE10 和 Windows (Phone) 8</a></li>
                            <li><a href="#support-safari-percentages">Safari 对百分比数字凑整的问题</a></li>
                            <li><a href="#support-fixed-position-keyboards">模态框、导航条和虚拟键盘</a></li>
                            <li><a href="#support-browser-zooming">浏览器的缩放功能</a></li>
                            <li><a href="#support-sticky-hover-mobile">Sticky :hover/:focus on mobile</a></li>
                            <li><a href="#support-printing">打印</a></li>
                            <li><a href="#support-android-stock-browser">Android stock browser</a></li>
                            <li><a href="#support-validators">Validators</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#third-parties">对第三方组件的支持</a>
                    </li>
                    <li>
                        <a href="#accessibility">可访问性</a>
                    </li>
                    <li>
                        <a href="#license-faqs">许可证 FAQ</a>
                    </li>
                    <li>
                        <a href="#translations">文档翻译</a>
                    </li>


                </ul>
                <a class="back-to-top" href="#top">
                    返回顶部
                </a>

            </nav>
        </div>
    </div>
</div>

<!-- Footer
================================================== -->
<footer class="bs-docs-footer" style="background-color: #00a2d4">
    <div class="container">
        <ul  style="list-style-type: none;padding-left:0px;margin-bottom: 20px;margin-top: 20px; ">
            <li style="display: inline"><a href="https://github.com/twbs/bootstrap">GitHub 仓库</a></li>
            <li  style="display: inline"><a href="../getting-started/#examples">实例</a></li>
            <li  style="display: inline"><a href="http://www.youzhan.org">优站精选</a></li>
            <li  style="display: inline"><a href="../about/">关于</a></li>
        </ul>

        <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>

        <p>本项目源码受 <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>开源协议保护，文档受 <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a> 开源协议保护。</p>

    </div>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../dist/js/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
<script src="../assets/js/docs.min.js"></script>
<script>
    /*!
     * JavaScript for Bootstrap's docs (http://getbootstrap.com)
     * Copyright 2011-2016 Twitter, Inc.
     * Licensed under the Creative Commons Attribution 3.0 Unported License. For
     * details, see https://creativecommons.org/licenses/by/3.0/.
     */
    !function (a) {
        "use strict";
        a(function () {
            var b = a(window), c = a(document.body);
            c.scrollspy({target: ".bs-docs-sidebar"}), b.on("load", function () {
                c.scrollspy("refresh")
            }), a('.bs-docs-container [href="#"]').click(function (a) {
                a.preventDefault()
            }), setTimeout(function () {
                var b = a(".bs-docs-sidebar");
                b.affix({
                    offset: {
                        top: function () {
                            var c = b.offset().top, d = parseInt(b.children(0).css("margin-top"), 10),
                                e = a(".bs-docs-nav").height();
                            return this.top = c - e - d
                        }, bottom: function () {
                            return this.bottom = a(".bs-docs-footer").outerHeight(!0)
                        }
                    }
                })
            }, 100), setTimeout(function () {
                a(".bs-top").affix()
            }, 100), function () {
                var b = a("#bs-theme-stylesheet"), c = a(".bs-docs-theme-toggle"), d = function () {
                    b.attr("href", b.attr("data-href")), c.text("Disable theme preview"), localStorage.setItem("previewTheme", !0)
                };
                localStorage.getItem("previewTheme") && d(), c.click(function () {
                    var a = b.attr("href");
                    a && 0 !== a.indexOf("data") ? (b.attr("href", ""), c.text("Preview theme"), localStorage.removeItem("previewTheme")) : d()
                })
            }(), a(".tooltip-demo").tooltip({
                selector: '[data-toggle="tooltip"]',
                container: "body"
            }), a(".popover-demo").popover({
                selector: '[data-toggle="popover"]',
                container: "body"
            }), a(".tooltip-test").tooltip(), a(".popover-test").popover(), a(".bs-docs-popover").popover(), a("#loading-example-btn").on("click", function () {
                var b = a(this);
                b.button("loading"), setTimeout(function () {
                    b.button("reset")
                }, 3e3)
            }), a("#exampleModal").on("show.bs.modal", function (b) {
                var c = a(b.relatedTarget), d = c.data("whatever"), e = a(this);
                e.find(".modal-title").text("New message to " + d), e.find(".modal-body input").val(d)
            }), a(".bs-docs-activate-animated-progressbar").on("click", function () {
                a(this).siblings(".progress").find(".progress-bar-striped").toggleClass("active")
            }), ZeroClipboard.config({
                moviePath: "/assets/flash/ZeroClipboard.swf",
                hoverClass: "btn-clipboard-hover"
            }), a(".highlight").each(function () {
                var b = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';
                a(this).before(b)
            });
            var d = new ZeroClipboard(a(".btn-clipboard")), e = a("#global-zeroclipboard-html-bridge");
            d.on("load", function () {
                e.data("placement", "top").attr("title", "Copy to clipboard").tooltip(), d.on("dataRequested", function (b) {
                    var c = a(this).parent().nextAll(".highlight").first();
                    b.setText(c.text())
                }), d.on("complete", function () {
                    e.attr("title", "Copied!").tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle")
                })
            }), d.on("noflash wrongflash", function () {
                a(".zero-clipboard").remove(), ZeroClipboard.destroy()
            })
        })
    }(jQuery), function () {
        "use strict";
        anchors.options.placement = "left", anchors.add(".bs-docs-section > h1, .bs-docs-section > h2, .bs-docs-section > h3, .bs-docs-section > h4, .bs-docs-section > h5")
    }();
</script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
